<template>
  <div class="centeet">
    <div
      class="cardHeader"
      style="display: flex; align-items: center; cursor: pointer"
      v-if="examineId"
    >
      <img
        class="cardHeader_icon m_hoverCP"
        src="@assets/img/img28.png"
        alt=""
      />
      <span @click="onBack">{{$t('message.Return')}}</span>
    </div>
    <a-card :bordered="false">
      <div class="bonReport" v-if="examineId && twoType == 2">
        <a-button
          @click="viewCancel"
          v-if="DownloadObj.id"
          class="leftChaxun wigthsP"
        >
        {{$t('message.view_carbon_report')}}</a-button
        >
        <a-button
          @click="generateCarbonReport"
          v-else
          class="leftChaxun wigthsP"
        >
        {{$t('message.carbon_generation_report')}}</a-button
        >
      </div>
      <div class="topFlex" v-if="!examineId">
        <div class="letftRacharts">
          <div class="title">{{ $t('message.Inventory_situation') }}</div>
          <div class="lists">
            {{$t('message.All')}} <span class="color">{{ checkStatistic["全部"] }}</span>
          </div>
          <div class="lists">
            {{$t('message.Filled_in')}}<span class="color1">{{ checkStatistic["已填报"] }}</span>
          </div>
          <div class="lists">
            {{$t('message.Filling_in')}}<span class="color2">{{ checkStatistic["填报中"] }}</span>
          </div>
          <div class="lists">
            {{$t('message.Archived')}}<span class="color3">{{ checkStatistic["已归档"] }}</span>
          </div>
        </div>
        <div class="rightRacharts">
          <div class="title flex">
            {{$t('message.Is_being_questioned')}}
            <div class="gengduo m_hoverCP" @click="onOrganize">
              {{$t('message.more')}} <img src="@/assets/carbon/img8.png" alt="" />
            </div>
          </div>
          <a-table
            :customRow="customRow"
            :columns="columns"
            :data-source="fenestraData"
            :pagination="false"
            bordered
            size="middle"
          >
            <template slot="operation" slot-scope="text, record, index">
              <div class="editable-row-operations">
                <a @click="() => submitAform(record)">{{$t('message.fill_in')}}</a>
              </div>
            </template>
          </a-table>
        </div>
      </div>
      <div class="testFlex" v-else>
        <div class="letftRacharts">
          <div class="title msw">{{$t('message.carbon_emissions')}}</div>
          <div class="letfwFlex">
            <div>
              <span class="valueLeft">{{ carbonObj.total }}</span>
              <span class="valueRight">tCO₂e</span>
            </div>
            <div class="vauFlexs">
              <div>
                <span class="value1">{{$t('message.last_year')}}：</span>
                <span class="value2">{{ carbonObj.preTotal }}tCO₂e</span>
              </div>
              <div>
                <span class="value1">{{$t('message.year_on_year')}}：</span>
                <span class="value3">{{ carbonObj.increase }}%</span>
              </div>
            </div>
          </div>
        </div>
        <div class="rightRacharts">
          <div class="oneFlex">
            <span class="titleTws">{{$t('message.energy_using_carbon_emission')}}</span>
            <div>
              <span class="valueLeft">{{ carbonObj.cost }}</span>
              <span class="valueRight">tCO₂e</span>
            </div>
          </div>
          <div class="oneFlex">
            <span class="titleTws">{{$t('message.Green_emission_reduction')}}</span>
            <div>
              <span class="valueLeft">{{ carbonObj.green }}</span>
              <span class="valueRight">tCO₂e</span>
            </div>
          </div>
        </div>
      </div>
      <div class="setins" v-if="!examineId">
        <a-select
          style="width: 147px"
          :placeholder="$t('message.please_select_accounting_entity')"
          v-model="form.orgId"
          @change="loadorgId"
        >
          <a-select-option
            v-for="province in costCalcProvinceData"
            :key="province.id"
          >
            {{ province.departName }}
          </a-select-option>
        </a-select>
        <a-date-picker
          style="width: 130px"
          v-model="form.year"
          :format="monthFormat"
          :valueFormat="monthFormat"
          mode="year"
          :open="yearOpen"
          :allowClear="false"
          @panelChange="opanelChange"
          @openChange="onopenelChange"
        />
        <a-select
          style="width: 200px"
          :placeholder="$t('message.please_select_accounting_standard')"
          v-model="form.standraId"
          @change="loadorgId"
        >
          <a-select-option
            v-for="province in provinceData"
            :key="province.key"
            :value="province.key"
          >
            {{ province.title }}
          </a-select-option>
        </a-select>
      </div>
      <div :class="{ paddingx: !examineId, paddingx1: examineId }" v-if="isShow && isAss">
        <div class="sansTyles" v-if="!examineId">
          <div class="flex collaose-center">
            <div class="title1" style="font-weight: bold ! !important">
              {{ form.year }}{{$t('message.carbon_emission_data')}}
            </div>
            <div class="flex1">
              <a-button @click="onRapidFilling" class="leftChaxun wigthsP">
                {{$t('message.fill_in_quickly')}}</a-button
              ><a-button @click="ondsataSubmitAform" class="leftChaxun wigthsP">
                {{$t('message.data_reporting')}}</a-button
              >
            </div>
          </div>
          <div class="tpfstyle">
            <div class="leftTpfstyle">
              <div class="title1 marbons" style="font-weight: 400 ! !important">
                {{$t('message.fill_in_the_progress')}}
              </div>
              <div style="display: flex; justify-content: center">
                <a-progress
                  :strokeWidth="20"
                  :percent="statisticObj.percent"
                  :strokeColor="'#56C08D'"
                  :showInfo="false"
                  style="width: 588px"
                />
              </div>
              <div class="progress">
                <div class="left">
                  <div class="borer"></div>
                  <div class="twxt">
                    {{$t('message.completed_item')}} <span>{{ statisticObj.completeItemNo }}</span>
                  </div>
                </div>
                <div class="right">
                  <div class="borer"></div>
                  <div class="twxt">
                    {{$t('message.unreported_item')}} <span>{{ statisticObj.noCompleteItemNo }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="rightTpfstyle">
              <div class="title1" style="font-weight: 400 !important">
                {{$t('message.carbon_emissions')}}
              </div>
              <div class="fleisonw">
                <div class="left">
                  <div class="flexsw">
                    <div class="texts">{{ carbonObj.total }}</div>
                    <div class="texts1">tCO₂e</div>
                  </div>
                  <div class="bottom32">
                    <div class="boLeft">
                      {{$t('message.last_year')}}： <span>{{ carbonObj.preTotal }}tCO₂e</span>
                    </div>
                    <div class="boRight">
                      {{$t('message.year_on_year')}}： <span>{{ carbonObj.increase }}%</span>
                    </div>
                  </div>
                </div>
                <div class="right">
                  <div class="tighTiles">{{$t('message.energy_using_carbon_emission')}}</div>
                  <div class="tighTile1 marbons1">
                    {{ carbonObj.cost }}tCO₂e
                  </div>
                  <div class="tighTiles">{{$t('message.emission_reduction_measures')}}</div>
                  <div class="tighTile1">{{ carbonObj.green }}tCO₂e</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="fourTyles">
          <div class="letffour">
            <div class="title1 fourFlex">
              {{$t('message.carbon_emission_analysis')}}
              <a-select
                style="width: 100px"
                v-model="analysSelectValue"
                @change="carbonCheckChartLeftData"
              >
                <a-select-option
                  v-for="province in analysSelect"
                  :key="province.value"
                >
                  {{ province.title }}
                </a-select-option>
              </a-select>
            </div>
            <div class="fourswFlex">
              <div id="leftFourpie"></div>
              <div class="rightsFour">
                <div
                  class="listFour"
                  v-for="(item, index) in analysisArr"
                  :key="index"
                >
                  <div
                    class="lisFours"
                    :style="{ background: colorList[index] + ' !important' }"
                  ></div>
                  <div class="lisFours1">
                    <a-tooltip>
                      <template slot="title">
                        {{ item.name }}
                      </template>
                      {{
                        item.name.length <= 3
                          ? item.name
                          : item.name.substr(0, 3) + "..."
                      }}
                    </a-tooltip>
                  </div>
                  <div class="lisFours2">{{ item.percent }}%</div>
                  <div class="lisFours2">{{ item.value }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="righfour">
            <div class="title1 fourFlex">{{$t('message.carbon_emissions_from_facilities_activities')}}（TOP5）</div>
            <div id="salesfour"></div>
          </div>
        </div>
        <div class="sanchitouScna">
          <div class="title1">{{$t('message.carbon_emission_and_diversion_diagram_of_enterprises')}}</div>
          <div id="sanchitou"></div>
        </div>
        <div class="tabse">
          <a-tabs default-active-key="1" @tabClick="callback">
            <a-tab-pane
              :key="item.categoryId"
              :tab="item.name"
              v-for="item in category"
            ></a-tab-pane>
          </a-tabs>
          <div class="tabseFlex">
            <div class="sanchLefts">
              <div class="title1">{{$t('message.carbon_emissions')}}</div>
              <div class="sanchTxt">
                {{ threeoBj.left.totalCarbon }}
                <span>tCO₂e</span>
              </div>
              <div class="boLeft marb">
                {{$t('message.last_year')}}： <span>{{ threeoBj.left.lastYearTotalCarbon }}tCO₂e</span>
              </div>
              <div class="boRight">
                {{$t('message.year_on_year')}}： <span>{{ threeoBj.left.percent }}%</span>
              </div>
            </div>
            <div class="sanchCenter">
              <div class="title1">{{$t('message.share_of_greenhouse_gas_emissions')}}</div>
              <div class="ovflowe">
                <div
                  class="sanchProgress"
                  v-for="(item, index) in threeoBj.mid"
                  :key="index"
                >
                  <div class="leftPRopgrss">{{ item.name }}</div>
                  <div class="swFlex">
                    <a-progress
                      :strokeWidth="10"
                      :percent="item.percent"
                      :showInfo="false"
                      style="width: 250px"
                      :strokeColor="'#56C08D'"
                    />
                    <div style="margin-left:10px">{{ item.percent }}%</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="sanchRights">
              <div class="title1">{{$t('message.carbon_emission_analysis')}}</div>
              <div id="sanchRBars"></div>
            </div>
          </div>
        </div>
        <div class="sanchitouLines">
          <div class="title1 flex">
            {{$t('message.trend_analysis')}}
            <a-select
              style="width: 84px; height: 40px !important"
              v-model="timeType"
              @change="getDataByMonthType"
            >
              <a-select-option
                v-for="province in timeProvinceData"
                :key="province.value"
              >
                {{ province.title }}
              </a-select-option>
            </a-select>
          </div>
          <div id="sanchitouLines"></div>
        </div>
        <div class="sanchitouLines ovflowe">
          <div class="swFlex" style="justify-content: space-between;">
            <div class="title1 flex">{{$t('message.composition_analysis')}}</div>
            <a-button type="primary" icon="download" @click="onExport">{{$t('message.Export')}}</a-button>
          </div>
          <div class="collapse-tpyz">
            <a-collapse v-model="activeCollapseKey">
              <a-collapse-panel
                v-for="(item, idex) in collapseData"
                :key="item.id"
                :header="item.name"
              >
                <div
                  class="collaose-center"
                  v-for="(value, idese) in item.children"
                  :key="idese"
                >
                  <div
                    class="collaoseFlex collaose-marn"
                    style="justify-content: space-between"
                  >
                    <div class="collaose-title">
                      <img src="@/assets/carbon/img1.png" alt="" />
                      {{ value.name }}
                    </div>
                    <div class="collaoseFlex">
                      <div class="collaose-texts collaoseFlex collaose-rights">
                        <div>{{$t('message.proportion_of_total_emission_reduction')}}：</div>
                        <div class="posrs">
                          <el-progress
                            :stroke-width="15"
                            :color="'#FFB98C'"
                            :percentage="value.greenPer"
                            style="width: 200px"
                          ></el-progress>
                          <div class="colosw1">
                            {{ value.green
                            }}{{ value.children[0].carbonMolecule }}
                          </div>
                        </div>
                      </div>
                      <div class="collaose-texts collaoseFlex collaose-ris">
                        <div>{{$t('message.total_carbon_emission')}}：</div>
                        <div class="posrs">
                          <el-progress
                            :stroke-width="15"
                            :color="'#92DAB2'"
                            :percentage="value.costPer"
                            style="width: 200px"
                          ></el-progress>
                          <div class="colosw">
                            {{ value.carbon
                            }}{{ value.children[0].carbonMolecule }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="collapse-table">
                    <a-table
                      :columns="columns1"
                      :data-source="value.children"
                      :pagination="false"
                      bordered
                      rowKey="id"
                    >
                      <template
                        slot="operation"
                        slot-scope="text, record, index"
                      >
                        <div
                          style="display: flex; align-items: center"
                          v-if="record.type == 1"
                        >
                          <div class="coloT1">{{ record.costPer }}%</div>
                          <el-progress
                            :show-text="false"
                            :stroke-width="8"
                            :color="'#92DAB2'"
                            :percentage="record.costPer"
                            style="width: 200px"
                          ></el-progress>
                        </div>
                        <div style="display: flex; align-items: center" v-else>
                          <div class="coloT2">{{ record.greenPer }}%</div>
                          <el-progress
                            :show-text="false"
                            :stroke-width="8"
                            :color="'#FFB98C'"
                            :percentage="record.greenPer"
                            style="width: 200px"
                          ></el-progress>
                        </div>
                      </template>
                    </a-table>
                  </div>
                </div>
              </a-collapse-panel>
            </a-collapse>
          </div>
        </div>
      </div>
      <!-- 底部数据 -->
      <div class="bottom" v-if="examineId && isAss">
        <div class="flex2">
          <div class="bottom-flex">
            <div class="text">{{$t('message.total_release')}}：</div>
            <div class="text1">{{ carbonObj.total }}</div>
            <div class="text2">tCO₂e</div>
          </div>
          <div class="bottom-flex">
            <div class="text3">{{$t('message.total_energy_carbon_emission')}}：</div>
            <div class="text4">{{ carbonObj.cost }}</div>
            <div class="text5">tCO₂e</div>
          </div>
          <div class="bottom-flex">
            <div class="text3">{{$t('message.reduce_harmful_emissions')}}：</div>
            <div class="text4">{{ carbonObj.green }}</div>
            <div class="text5">tCO₂e</div>
          </div>
        </div>
        <div class="flex1" v-if="twoType == 2">
          <a-button
            @click="onArchivist"
            v-if="!guidangIsAss"
            class="leftChaxun wigthsP"
          >
          {{$t('message.Archive')}}</a-button
          >
          <a-button
            @click="revocationOnArchivist"
            v-else-if="guidangIsAss && isOrgAdmin"
            class="leftChaxun2 wigthsP"
          >
          {{$t('message.withdraw_archive')}}</a-button
          >
        </div>
      </div>
      <div class="kongs" v-if="!isAss">
        <img src="@/assets/carbon/img13.png" alt="" />
        <div class="zanuw">{{$t('message.No_data')}}</div>
        <div class="zanuwTitle">{{$t('message.please_click_on_the_button_below_to_fill_in')}}</div>
        <div class="nuisw" @click="dataSubmitAform">{{$t('message.start_reporting')}}</div>
      </div>
    </a-card>
    <section class="m_popupBox" v-if="isShowDetailPopup">
      <tpyzDetail
          ref="tpyzDetail"
          addUrl="/orgCarbonEmissionSource/addSystemFromUser"
          editUrl="/orgCarbonEmissionSource/editFromUser"
          saveUrl="/orgCheckTemplate/addFromAdmin"
          @back="back"
          :type="2"
          :newForm="newForm">
      </tpyzDetail>
    </section>
    <a-modal
      :title="$t('message.Carbon_inventory_report')"
      :visible="visible"
      @ok="handleCancel"
      @cancel="handleCancel"
    >
      <div class="flecCenter">
        <div class="modalFlexs">
          <img src="@/assets/carbon/img14.png" alt="" />
          <div>
            {{ DownloadObj.targetName }}-{{ DownloadObj.year }}-{{$t('message.Carbon_inventory_report')}}
          </div>
        </div>
        <a-button
          type="primary"
          icon="download"
          :size="size"
          @click="exportXlsTemplate"
        >
        {{$t('message.Download')}}
        </a-button>
        <div class="modalFlexs1" @click="generateCarbonReport">
          <div>{{$t('message.Regenerate')}}</div>
          <img src="@/assets/carbon/img15.png" alt="" />
        </div>
        <div class="flwMondes">{{$t('message.Last_generation_date')}}：{{ DownloadObj.updateTime }}</div>
      </div>
    </a-modal>
    <section class="m_popupBox" v-if="rapidFilling">
      <rapidFilling
        ref="rapidFilling"
        :examineId="form.examineId"
        @onRapoidBack="onRapoidBack"
      ></rapidFilling>
    </section>
  </div>
</template>
<script>
import * as echarts from "echarts";
import rapidFilling from "@comp/common/rapidFilling.vue";
import tpyzDetail from "@comp/common/tpyzDetail.vue";
import { getAction, postAction, deleteAction } from "@api/manage";
import { downFile } from "@/api/manage";
import Vue from "vue";
import moment from "moment";
export default {
  name: "kanban",
  props: {
    examineId: {
      type: String,
      default: "",
    },
    twoType: {
      type: Number,
      default: 0,
    },
  },
  components: {
    tpyzDetail,
    rapidFilling,
  },
  data() {
    return {
      size: "large",
      visible: false,
      rapidFilling: false,
      isShowDetailPopup: false,
      provinceData: [],
      colorList: [
        "#1BC08A",
        "#81E0DB",
        "#FFC439",
        "#FF8C73",
        "#F35571",
        "#2C57FF",
      ],
      costCalcProvinceData: [],
      timeProvinceData: [
        {
          title: this.$t('message.quarter'),
          value: "2",
        },
        {
          title: this.$t('message.month'),
          value: "3",
        },
      ],
      timeType: "2",
      monthFormat: "YYYY",
      yearOpen: false,
      form: {
        examineId: "",
        year: "",
        standraId: undefined,
        orgId: undefined,
      },
      columns: [
        {
          title: this.$t('message.Accounting_entity'),
          dataIndex: "targetName",
          align: "center",
        },
        {
          title: this.$t('message.Accounting_standard'),
          align: "center",
          dataIndex: "standardName",
        },
        {
          title: this.$t('message.Accounting_date'),
          align: "center",
          dataIndex: "year",
        },
        {
          title: this.$t('message.Handle'),
          align: "center",
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" },
        },
      ],
      columns1: [
        {
          title: this.$t('message.facilities_activities'),
          dataIndex: "name",
          align: "center",
        },
        {
          title: this.$t('message.Emission_source'),
          align: "center",
          dataIndex: "sourceText",
        },
        {
          title: this.$t('message.Emission_type'),
          align: "center",
          dataIndex: "typeText",
        },
        {
          title: this.$t('message.Active_data'),
          align: "center",
          dataIndex: "data",
        },
        {
          title: `${this.$t('message.carbon_emissions')}tCO₂e`,
          align: "center",
          dataIndex: "carbon",
        },
        {
          title: this.$t('message.carbon_emission_emission_reduction_ratio'),
          align: "center",
          width: 280,
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" },
        },
      ],
      fenestraData: [],
      carbonObj: {}, //碳排放量
      analysisArr: [], //碳排分析
      analysSelectValue: 1,
      analysSelect: [
        {
          value: 1,
          title: this.$t('message.category'),
        },
        {
          value: 2,
          title: this.$t('message.Emission_source'),
        },
      ], //碳排下拉框
      cateId: "", //查询id中部三合一
      category: [],
      threeoBj: {
        left: {},
        mid: [],
        right: [],
      }, //中部三合一数据
      collapseData: [], //底部数据
      activeCollapseKey: [],
      LeftData: "",
      checkStatistic: {},
      isAss: true,
      statisticObj: {},
      newForm: {},
      guidangIsAss: false, //归档按钮切换
      baogaoIsAss: false, //报告按钮切换
      DownloadObj: {},
      isOrgAdmin: false,
      isShow: false,
    };
  },
  mounted() {
    console.log(Vue.ls.get("isOrgAdmin"), "isOrgAdmin");
    this.isOrgAdmin = Vue.ls.get("isOrgAdmin");
    this.form.examineId = this.examineId;
    if (this.examineId) {
      this.unify();
      if (this.twoType == 2) {
        this.queryByCheckCheckId();
        this.getDetail();
      }
    } else {
      this.getOrgAllSubjectOfCostCalc();
      this.getCheckStatistic(); //盘查情况
      this.getNoSubmitCheck(); //正在排查
    }
  },
  methods: {
    onExport() {
      getAction('/cyOrgCarbonReport/createPdf', {
        orgCheckCheckId: this.form.examineId
      }).then(res => {
        if (res.success) {
          this.$message.success('导出构成分析成功')
          setTimeout(() => {
            let url = window._CONFIG['domianURL'] + res.result
            window.open(url, '_blank')
          }, 500)

        } else {
          this.$message.error(res.message)
        }
      })
    },
    onRapoidBack() {
      this.rapidFilling = false;
      this.unify();
    },
    /**
     *下载报告
     */
    exportXlsTemplate() {
      downFile(
        window._CONFIG["domianURL"] + this.DownloadObj.downloadUrl,
        "",
        "get"
      ).then((data) => {
        if (!data) {
          this.$message.warning("文件下载失败");
          return;
        }
        let fileName = "模版";
        if (typeof window.navigator.msSaveBlob !== "undefined") {
          window.navigator.msSaveBlob(
            new Blob([data], { type: "application/vnd.ms-excel" }),
            fileName + ".docx"
          );
        } else {
          let url = window.URL.createObjectURL(
            new Blob([data], { type: "application/vnd.ms-excel" })
          );
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", fileName + ".xls");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link); //下载完成移除元素
          window.URL.revokeObjectURL(url); //释放掉blob对象
        }
      });
    },
    viewCancel() {
      this.visible = true;
    },
    handleCancel() {
      this.visible = false;
    },
    /**
     *撤回归档
     */
    revocationOnArchivist() {
      getAction("/orgCheckCheck/republish", {
        id: this.form.examineId,
      }).then((res) => {
        if (res.success) {
          this.$message.success(res.message);
          this.guidangIsAss = false;
        }
      });
    },
    /**
     *归档
     */
    onArchivist() {
      getAction("/orgCheckCheck/publish", {
        id: this.form.examineId,
      }).then((res) => {
        if (res.success) {
          this.$message.success(res.message);
          this.guidangIsAss = true;
        }
      });
    },
    /**
     *获取详情
     */
    getDetail() {
      getAction("/orgCheckCheck/getDetail", {
        id: this.form.examineId,
      }).then((res) => {
        if (res.success) {
          if (res.status == 1) {
            this.guidangIsAss = true;
          }
        }
      });
    },
    /**
     *查询是否生成过报告
     */
    queryByCheckCheckId() {
      getAction("/cyOrgCarbonReport/queryByCheckCheckId", {
        orgCheckCheckId: this.form.examineId,
      }).then((res) => {
        if (res.success) {
          this.DownloadObj = res.result;
        }
      });
    },
    /**
     *生成碳报告
     */
    generateCarbonReport() {
      postAction("/cyOrgCarbonReport/saveOrUpdateReport", {
        orgCheckCheckId: this.form.examineId,
      }).then((res) => {
        if (res.success) {
          this.visible = true;
          this.DownloadObj = res.result;
          this.$message.success(this.$t('message.operation_success'))
        }
      });
    },
    /**
     *快速填报
     */
    onRapidFilling() {
      this.rapidFilling = true;
    },
    /**
     * 统一接口调用
     */
    unify() {
      this.carbonCheckSubmitData(); //碳排放量统计部分
      this.carbonCheckChartLeftData(); //碳排分析
      this.carbonCheckChartRightData(); //设施/活动碳排放
      this.getSangJiTable(); //桑基图
      this.getHasDataCategory(); //中部三合一获取有类别分类
      this.getDataByMonthType(); //趋势分析
      this.bottomTable(); //底部数据
      this.statisticCompleteItem();
    },
    onBack() {
      this.$emit("onKanbanBack");
    },
    customRow(record, index) {
      return {
        style: {
          // 背景颜色
          "background-color": (index + 1) % 2 === 1 ? "#F3F3F3" : "#ffffff",
        },
      };
    },

    callback(e) {
      console.log(e);
      this.cateId = e;
      this.carbonCategoryGasRes();
    },
    back() {
      this.isShowDetailPopup = false;
      if (this.form.examineId) {
        this.unify();
      } else {
        this.getCheckStatistic(); //盘查情况
        this.getNoSubmitCheck(); //正在排查
      }
    },
    ondsataSubmitAform() {
      this.newForm.checkId = this.form.examineId;
      this.newForm.standardId = this.form.standraId;
      this.newForm.targetId = this.form.orgId;
      this.newForm.year = this.form.year;
      this.isShowDetailPopup = true;
    },
    /**
     * 开始填报
     */
    dataSubmitAform(value) {
      console.log(value);
      // this.newForm.checkId = this.form.examineId;
      // this.newForm.standardId = this.form.standraId;
      // this.newForm.targetId = this.form.orgId;
      // this.newForm.year = this.form.year;
      postAction("/orgCheckCheck/createNewCommonCheck", {
        standardId: this.form.standraId,
        checkTargetId: this.form.orgId,
        year: this.form.year,
      }).then((res) => {
        if (res.success) {
          this.newForm.standardId = this.form.standraId;
          this.newForm.targetId = this.form.orgId;
          this.newForm.year = this.form.year;
          this.newForm.checkId = res.result.id;
          this.isShowDetailPopup = true;
        } else {
          this.$message.warning(res.message);
        }
      });
    },
    /**
     * 填报
     */
    submitAform(value) {
      console.log(value);
      this.newForm.checkId = value.id;
      this.newForm.standardId = value.standardId;
      this.newForm.targetId = value.targetId;
      this.newForm.year = value.year;
      this.isShowDetailPopup = true;
    },
    /**
     * 更多
     */
    onOrganize() {
      this.$router.push({
        path: "/carbonInventory/organize/index",
      });
    },
    /**
     * 填报进度
     */
    statisticCompleteItem() {
      getAction("/orgCheckCheck/statisticCompleteItem", {
        id: this.form.examineId,
      }).then((res) => {
        if (res.success) {
          this.statisticObj = res.result;
        }
      });
    },
    /**
     * 根据主体标准和年份查询id
     */
    getCheckIdByYearAndStadranIdc() {
      this.isShow = false
      getAction("/orgCheckCheck/getCheckIdByYearAndStadranId", this.form).then(
        (res) => {
          if (res.success) {
            this.form.year = res.result.year;
            this.form.orgId = res.result.targetId;
            this.form.examineId = res.result.id;
            this.form.standraId = res.result.standardId;
            if (this.form.examineId) {
              this.isShow = true
              this.unify();
              this.isAss = true;
            } else {
              this.isAss = false;
            }
          } else {
            this.isAss = false;
            this.$message.error(res.message);
          }
        }
      );
    },
    /**
     * 正在排查
     */
    getNoSubmitCheck() {
      getAction("/orgCheckCheck/getNoSubmitCheck", "").then((res) => {
        if (res.success) {
          this.fenestraData = res.result ? res.result.slice(0, 4) : [];
        }
      });
    },
    /**
     * 盘查情况
     */
    getCheckStatistic() {
      getAction("/orgCheckCheck/getCheckStatistic", "").then((res) => {
        if (res.success) {
          this.checkStatistic = res.result;
        }
      });
    },
    /**
     * 底部数据
     */
    bottomTable() {
      getAction("/orgCheckCheck/bottomTable", {
        id: this.form.examineId,
      }).then((res) => {
        if (res.success) {
          let resData = res.result || [];
          this.collapseData = resData;
          let activeCollapseKey = []
          resData.forEach((item) => {
            activeCollapseKey.push(item.id);
          });
          this.activeCollapseKey = activeCollapseKey
        }
      });
    },
    /**
     * 趋势分析
     */
    getDataByMonthType() {
      getAction("/orgCheckCheck/getDataByMonthType", {
        id: this.form.examineId,
        type: this.timeType,
      }).then((res) => {
        if (res.success) {
          let salesProportionChart = echarts.init(
            document.getElementById("sanchitouLines")
          );
          console.log(salesProportionChart);
          let optionPie = {
            color: ["#FA9550"],
            grid: {
              left: "1%",
              right: "0%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              data: [],
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                data: [],
                type: "line",
              },
            ],
          };
          for (var key in res.result) {
            optionPie.xAxis.data.push(key);
            optionPie.series[0].data.push(res.result[key]);
          }
          salesProportionChart.setOption(optionPie);
          window.addEventListener("resize", function () {
            salesProportionChart.resize();
          });
        }
      });
    },
    /**
     * 中部三合一获取
     */
    carbonCategoryGasRes() {
      getAction("orgCheckCheck/carbonCategoryGasRes", {
        id: this.form.examineId,
        cateId: this.cateId,
      }).then((res) => {
        if (res.success) {
          this.threeoBj.left = res.result.left;
          this.threeoBj.mid = res.result.mid;
          this.threeoBj.right = res.result.right;
          let salesProportionChart = echarts.init(
            document.getElementById("sanchRBars")
          );
          console.log(salesProportionChart);
          let optionPie = {
            color: ["#FA9550"],
            title: [
              {
                left: "left",
                left: "0%",
                top: "1.25%",
                subtext: "单位：时间",
                subtextStyle: {
                  fontSize: 14,
                },
              },
            ],
            legend: {},
            grid: {
              left: "2%",
              right: "2%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              data: [],
              axisTick: {
                alignWithLabel: true,
              },
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                itemStyle: {
                  normal: {
                    barBorderRadius: [10, 10, 0, 0],
                  },
                },
                type: "bar",
                data: [],
              },
            ],
          };
          this.threeoBj.right.forEach((item) => {
            optionPie.xAxis.data.push(item.name);
            optionPie.series[0].data.push(item.value);
          });
          salesProportionChart.setOption(optionPie);
          window.addEventListener("resize", function () {
            salesProportionChart.resize();
          });
        }
      });
    },
    /**
     * 中部三合一获取有类别分类
     */
    getHasDataCategory() {
      getAction("/orgCheckCheck/getHasDataCategory", {
        id: this.form.examineId,
      }).then((res) => {
        if (res.success) {
          this.category = res.result;
          this.cateId = this.category[0].categoryId;
          this.carbonCategoryGasRes();
        }
      });
    },
    /**
     * 桑基图
     */
    getSangJiTable() {
      getAction("/orgCheckCheck/getSangJiTable", {
        id: this.form.examineId,
      }).then((res) => {
        if (res.success) {
          let myChart = echarts.init(document.getElementById("sanchitou"));
          myChart.hideLoading();
          let option = {
            tooltip: {
              trigger: "item",
              triggerOn: "mousemove",
              formatter: "{b}{c}tCO₂e",
            },
            series: [
              {
                type: "sankey",
                data: res.result.nodes,
                links: res.result.links,
                emphasis: {
                  focus: "adjacency",
                },
                levels: [
                  {
                    depth: 0,
                    itemStyle: {
                      color: "#fbb4ae",
                    },
                    lineStyle: {
                      color: "source",
                      opacity: 0.6,
                    },
                  },
                  {
                    depth: 1,
                    itemStyle: {
                      color: "#b3cde3",
                    },
                    lineStyle: {
                      color: "source",
                      opacity: 0.6,
                    },
                  },
                  {
                    depth: 2,
                    itemStyle: {
                      color: "#ccebc5",
                    },
                    lineStyle: {
                      color: "source",
                      opacity: 0.6,
                    },
                  },
                  {
                    depth: 3,
                    itemStyle: {
                      color: "#decbe4",
                    },
                    lineStyle: {
                      color: "source",
                      opacity: 0.6,
                    },
                  },
                ],
                lineStyle: {
                  curveness: 0.5,
                },
              },
            ],
          };
          myChart.setOption(option);
          window.addEventListener("resize", function () {
            myChart.resize();
          });
        }
      });
    },
    /**
     * 设施/活动碳排放
     */
    carbonCheckChartRightData() {
      getAction("/orgCheckCheck/carbonCheckChartRightData", {
        id: this.form.examineId,
      }).then((res) => {
        if (res.success) {
          let salesProportionChart = echarts.init(
            document.getElementById("salesfour")
          );
          console.log(salesProportionChart);
          let optionPie = {
            color: ["#2BA471"],
            title: [
              {
                left: "left",
                left: "0%",
                top: "1.25%",
                subtext: "单位：时间",
                subtextStyle: {
                  fontSize: 14,
                },
              },
            ],
            legend: {},
            grid: {
              left: "0%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "value",
              boundaryGap: [0, 0.01],
            },
            yAxis: {
              type: "category",
              data: [],
            },
            series: [
              {
                label: {
                  show: true,
                  position: "right",
                },
                itemStyle: {
                  normal: {
                    barBorderRadius: [0, 10, 10, 0],
                  },
                },
                type: "bar",
                data: [],
              },
            ],
          };
          res.result.forEach((item) => {
            optionPie.yAxis.data.push(item.name);
            optionPie.series[0].data.push(item.value);
          });
          salesProportionChart.setOption(optionPie);
          window.addEventListener("resize", function () {
            salesProportionChart.resize();
          });
        }
      });
    },
    /**
     * 碳排分析
     */
    carbonCheckChartLeftData(value) {
      console.log(value);
      getAction("/orgCheckCheck/carbonCheckChartLeftData", {
        id: this.form.examineId,
        type: this.analysSelectValue,
      }).then((res) => {
        if (res.success) {
          this.analysisArr = res.result;
          console.log(this.analysisArr, "analysisArr");
          let salesProportionChart = echarts.init(
            document.getElementById("leftFourpie")
          );
          let optionPie = {
            color: this.colorList,
            series: [
              {
                type: "pie",
                radius: ["40%", "70%"],
                avoidLabelOverlap: false,
                itemStyle: {
                  borderRadius: 10,
                  borderColor: "#fff",
                  borderWidth: 2,
                },
                label: {
                  normal: {
                    show: false,
                    position: "center",
                    formatter: "{b}\n{c}\n{d}% ",
                    textStyle: {
                      fontWeight: "400",
                      fontSize: 14,
                      color: "#2B3674",
                    },
                  },
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: 18,
                    fontWeight: "500",
                  },
                },
                labelLine: {
                  show: false,
                },
                data: res.result,
              },
            ],
          };
          salesProportionChart.setOption(optionPie);
          window.addEventListener("resize", function () {
            salesProportionChart.resize();
          });
        }
      });
    },
    /**
     * 碳排放量统计部分
     */
    carbonCheckSubmitData(value) {
      console.log(value);
      getAction("/orgCheckCheck/carbonCheckSubmitData", {
        id: this.form.examineId,
      }).then((res) => {
        if (res.success) {
          this.carbonObj = res.result;
        }
      });
    },
    /**
     *时间选择
     */
    onopenelChange(status) {
      this.yearOpen = status;
    },
    /**
     *时间选择
     */
    opanelChange(value, mode) {
      console.log(value, mode);
      this.form.year = moment(value).format("YYYY");
      this.yearOpen = false;
      this.getCheckIdByYearAndStadranIdc();
    },
    /**
     *下拉框
     */
    loadorgId() {
      if (this.form.year && this.form.orgId && this.form.standraId) {
        this.getCheckIdByYearAndStadranIdc();
      }
    },
    /**
     * 核算标准
     */
    loadTreeRoot(value) {
      console.log(value);
      getAction("/sys/category/loadTreeRoot", {
        pcode: "A01",
        async: true,
      }).then((res) => {
        if (res.success) {
          this.provinceData = res.result;
          this.getCheckIdByYearAndStadranIdc();
        }
      });
    },
    /**
     * 核算主体
     */
    getOrgAllSubjectOfCostCalc(value) {
      console.log(value);
      getAction("/orgDept/getOrgAllSubjectOfCostCalc", "").then((res) => {
        if (res.success) {
          this.costCalcProvinceData = res.result;
          this.loadTreeRoot(); //核算标准
        }
      });
    },
  },
};
</script>
<style lang="less">
.collapse-tpyz {
  .ant-collapse {
    background: #fff !important;
    border: none !important;
    border-radius: 0 !important;
  }
  .ant-collapse-item {
    border: none !important;
  }
  .ant-collapse-content {
    background: #f5f7f6 !important;
  }
  .ant-collapse-content-box {
    padding: 24px 0 24px 48px !important;
  }
}
</style>

<style lang="less" scoped>
.swFlex{
  display: flex;
  align-items: center;

}
.flecCenter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
}
.flwMondes {
  font-weight: 400;
  font-size: 12px;
  color: #888888;
}
.modalFlexs {
  display: flex;
  align-items: center;
  img {
    width: 20px;
    height: 20px;
    margin-right: 6px;
  }
  div {
    font-weight: 400;
    font-size: 16px;
    color: #333333;
  }
}

.modalFlexs1 {
  display: flex;
  align-items: center;
  img {
    width: 12px;
    height: 12px;
    margin-left: 6px;
  }
  div {
    font-weight: 400;
    font-size: 12px;
    color: #888888;
  }
}
.bonReport {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-top: 24px;
  margin-right: 24px;
}
.kongs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #F0F2F5;

  .zanuw {
    margin: 23px 0 8px;
    font-weight: 600;
  }
  .zanuwTitle {
    font-weight: 400;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
  }
  .nuisw {
    width: 88px;
    height: 32px;
    background: #148958;
    border-radius: 3px 3px 3px 3px;
    font-weight: 400;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 32px;
    cursor: pointer;
  }
}
.flex1 {
  display: flex;
  align-items: center;
  gap: 24px;
}
.flex2 {
  display: flex;
  align-items: baseline;
  gap: 54px;
}
.bottom {
  width: 100%;
  padding: 0px 24px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #e7e7e7;
  background: #ffffff;
  position: absolute;
  bottom: 24px;

  .bottom-flex {
    display: flex;
    align-items: baseline;
  }
  .text {
    font-weight: 400;
    font-size: 18px;
    color: #333333;
  }

  .text1 {
    font-weight: 500;
    font-size: 32px;
    color: #148958;
    margin-right: 14px;
  }

  .text2 {
    font-weight: 400;
    font-size: 22px;
    color: #148958;
  }

  .text3 {
    font-weight: 400;
    font-size: 16px;
    color: #333333;
  }

  .text4 {
    font-weight: 500;
    margin-right: 14px;
    font-size: 18px;
    color: 333333;
  }

  .text5 {
    font-weight: 400;
    font-size: 16px;
    color: 333333;
  }
}
.ovflowe {
  overflow-y: scroll;
}
.coloT1 {
  font-weight: 500;
  font-size: 12px;
  color: #148958;
  margin-right: 8px;
  white-space: nowrap;
}
.coloT2 {
  font-weight: 500;
  font-size: 12px;
  margin-right: 8px;
  color: #be5a00;
  white-space: nowrap;
}
.collaose-ris {
  /deep/.el-progress__text {
    font-size: 10px !important;
    color: #148958 !important;
  }
}

.collaose-rights {
  /deep/.el-progress__text {
    font-size: 10px !important;
    color: #be5a00 !important;
  }
}
.collaose-center {
  margin-bottom: 24px;
  .posrs {
    position: relative;
  }
  .colosw {
    font-size: 10px;
    color: #008858;
    position: absolute;
    top: 0;
    left: 35%;
  }
  .colosw1 {
    font-size: 10px;
    color: #be5a00;
    position: absolute;
    top: 0;
    left: 35%;
  }
  .collaoseFlex {
    display: flex;
    align-items: center;
  }
  .collaose-marn {
    margin-bottom: 14px;
  }
  .collaose-rights {
    margin-right: 50px;
  }
  .collaose-texts {
    font-weight: 400;
    font-size: 12px;
    color: #888888;
  }
  .collaose-title {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.9);
    img {
      width: 16px;
      height: 16px;
      margin-right: 8px;
    }
  }
  .collapse-table {
    margin-bottom: 14px;
  }

  .collapse-tian {
    border-radius: 3px 3px 3px 3px;
    border: 1px solid #148958;
    font-weight: 400;
    font-size: 12px;
    color: #148958;
    padding: 2px 8px;
    background: #ffffff;
    display: flex;
    align-items: center;
    img {
      width: 14px;
      height: 14px;
    }
  }
}
.collapse-tpyz {
  margin-top: 16px;
}
.cardHeader {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #000000;
  margin-bottom: 24px;

  .cardHeader_icon {
    width: 16px;
    height: 16px;
  }
}
.testFlex {
  display: flex;
  padding: 24px 24px 0;
  gap: 24px;
  .letftRacharts {
    padding: 16px 24px 31px;
    width: 50%;

    background: #ffffff;
    .msw {
      margin-bottom: 41px !important;
    }
    .vauFlexs {
      display: flex;
      align-items: center;
      gap: 37px;
    }
    .title {
      font-weight: 400;
      font-size: 16px;
      color: #333333;
    }
    .valueLeft {
      font-weight: 600;
      font-size: 38px;
      color: #148958;
    }
    .valueRight {
      font-weight: 400;
      font-size: 14px;
      color: #333333;
    }
    .value1 {
      font-weight: 400;
      font-size: 14px;
      color: #888888;
    }
    .value2 {
      font-weight: 400;
      font-size: 14px;
      color: #333333;
    }
    .value3 {
      font-weight: 400;
      font-size: 14px;
      color: #d54941;
    }
  }

  .rightRacharts {
    width: 50%;
    display: flex;
    flex-direction: column;
    row-gap: 17px;
    .titleTws {
      font-weight: 400;
      font-size: 16px;
      color: #333333;
    }
    .oneFlex {
      padding: 24px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .valueLeft {
      font-weight: 600;
      font-size: 28px;
      color: #148958;
    }
    .valueRight {
      font-weight: 400;
      font-size: 14px;
      color: #333333;
    }
  }
  .letfwFlex {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
#sanchitouLines {
  width: 98%;
  height: 550px;
}
.tabse {
  background: #ffffff;
  margin-top: 24px;
}
.tabseFlex {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px 24px;
}
#sanchRBars {
  width: 90%;
  height: 300px;
}
.sanchRights {
  width: 58%;
  height: 368px;
  background: rgba(250, 222, 208, 0.29);
  border-radius: 2px 2px 2px 2px;
  padding: 24px 24px 19px 24px;
}
.sanchCenter {
  width: 29%;
  height: 368px;
  background: rgba(227, 249, 233, 0.29);
  border-radius: 2px 2px 2px 2px;
  padding: 24px 24px 26px 24px;
  overflow: hidden;
  .ovflowe {
    height: 300px;
  }
  // overflow-y: scroll;
  /deep/.ant-progress-inner {
    background: #ececec !important;
  }
  .sanchProgress {
    display: flex;
    align-items: center;
    .leftPRopgrss {
      width: 40%;
    }
    div {
      font-weight: 400;
      font-size: 16px;
      color: #888888;
    }
  }
}
.sanchLefts {
  width: 20%;
  height: 368px;
  background: rgba(214, 221, 255, 0.3);
  border-radius: 2px 2px 2px 2px;
  padding: 24px 24px 60px 24px;
  .marb {
    margin-bottom: 21px;
  }
  .sanchTxt {
    font-weight: 600;
    font-size: 38px;
    color: #148958;
    display: flex;
    align-items: baseline;
    margin-top: 71px;
    margin-bottom: 71px;
    span {
      font-weight: 400;
      font-size: 14px;
      color: #333333;
    }
  }
  .boLeft {
    font-weight: 400;
    font-size: 14px;
    color: #888888;
    span {
      font-weight: 400;
      font-size: 14px;
      color: #333333;
    }
  }
  .boRight {
    font-weight: 400;
    font-size: 14px;
    color: #888888;
    span {
      font-weight: 400;
      font-size: 14px;
      color: #d54941;
    }
  }
}
.sanchitouScna {
  height: 614px;
  background: #ffffff;
  padding: 24px;
  margin-top: 24px;
}

.sanchitouLines {
  height: 621px;
  background: #ffffff;
  padding: 24px;
  margin-top: 24px;
}
#sanchitou {
  width: 100%;
  height: 500px;
  margin-top: 38px;
}
.fourswFlex {
  display: flex;
  align-items: center;
  gap: 80px;
}
.listFour {
  display: flex;
  align-items: center;
  gap: 12px;
  .lisFours {
    width: 8px;
    background: #1bc08a;
    height: 8px;
    border-radius: 50%;
  }
  .lisFours1 {
    font-weight: 400;
    font-size: 16px;
    color: #777777;
  }

  .lisFours2 {
    font-weight: 400;
    font-size: 14px;
    color: #2b7450;
  }
}
#leftFourpie {
  width: 400px;
  height: 400px;
}
#salesfour {
  width: 90%;
  //   flex: 1;
  height: 400px;
}
/deep/ .ant-card-body {
  background: #f5f8f7;
  padding: 0 !important;
}
.fourTyles {
  display: flex;
  width: 100%;
  gap: 24px;
  .letffour {
    padding: 24px;
    background: #fff;
    width: 50%;
    .fourFlex {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  .righfour {
    width: 50%;
    padding: 24px;
    background: #fff;
    display: flex;
    flex-direction: column;
  }
}
.marbons {
  margin-bottom: 45px;
}
.paddingx {
  padding: 24px;
}

.paddingx1 {
  padding: 24px 24px 125px;
}

.marbons1 {
  margin-bottom: 26px;
}
.sansTyles {
  background-color: #fff;
  padding: 24px 24px 46px;
  margin-bottom: 24px;

  .tpfstyle {
    display: flex;
    gap: 24px;
    .leftTpfstyle {
      flex: 1;
      padding: 16px 24px;
      background-color: #fbfbfb;
      .progress {
        display: flex;
        align-items: center;
        gap: 53px;
        justify-content: center;
        margin-top: 27px;
        .left {
          display: flex;
          align-items: center;
          .borer {
            width: 7px;
            height: 7px;
            background: #148958;
            border-radius: 1px 1px 1px 1px;
            margin-right: 4px;
          }

          .twxt {
            font-weight: 400;
            font-size: 12px;
            line-height: 0;
            color: #1c212b;
            span {
              font-weight: 500;
              font-size: 16px;
              color: #3e3e41;
            }
          }
        }
        .right {
          display: flex;
          align-items: center;
          .borer {
            width: 7px;
            height: 7px;
            background: #f0f0f0;
            border-radius: 1px 1px 1px 1px;
            margin-right: 4px;
          }

          .twxt {
            font-weight: 400;
            font-size: 12px;
            color: #1c212b;
            line-height: 0;
            span {
              font-weight: 500;
              font-size: 16px;
              color: #3e3e41;
            }
          }
        }
      }
    }
    .rightTpfstyle {
      flex: 1;
      padding: 16px 24px;
      background-color: #fbfbfb;
      .fleisonw {
        display: flex;
        align-items: end;
        gap: 153px;
        .left {
          display: flex;
          flex-direction: column;
          justify-content: end;
          .flexsw {
            display: flex;
            align-items: baseline;
            .texts {
              font-weight: 600;
              font-size: 38px;
              color: #148958;
            }
            .texts1 {
              font-weight: 400;
              font-size: 14px;
              color: #333333;
            }
          }
          .bottom32 {
            display: flex;
            align-items: center;
            margin-top: 23px;
            gap: 37px;
            .boLeft {
              font-weight: 400;
              font-size: 14px;
              color: #888888;
              span {
                font-weight: 400;
                font-size: 14px;
                color: #333333;
              }
            }
            .boRight {
              font-weight: 400;
              font-size: 14px;
              color: #888888;
              span {
                font-weight: 400;
                font-size: 14px;
                color: #d54941;
              }
            }
          }
        }
        .right {
          .tighTiles {
            font-weight: 400;
            font-size: 14px;
            color: #888888;
            margin-bottom: 17px;
          }
          .tighTile1 {
            font-weight: 400;
            font-size: 14px;
            color: #333333;
          }
        }
      }
    }
  }
}

.setins {
  background: #ffffff;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 9px 48px;
}
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gengduo {
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  img {
    width: 16px;
    height: 16px;
  }
}
.color {
  color: #2c57ff;
  font-weight: bold;
  font-size: 34px !important;
  line-height: 0 !important;
}
.color1 {
  color: #148958;
  font-weight: bold;
  font-size: 34px !important;
  line-height: 0 !important;
}
.color2 {
  color: #e37318;
  font-weight: bold;
  font-size: 34px !important;
  line-height: 0 !important;
}
.color3 {
  color: #333333;
  font-weight: bold;
  font-size: 34px !important;
  line-height: 0 !important;
}
.title {
  font-weight: 500;
  font-size: 16px;
  color: #333333;
  margin-bottom: 21px;
}
.title1 {
  font-weight: bold;
  font-size: 16px;
  color: #333333;
}
.centeet {
  overflow-y: scroll;
  background-color: #f5f7f6;
}

.topFlex {
  padding: 24px;
  display: flex;
  gap: 24px;
  .letftRacharts {
    background: #ffffff;
    border-radius: 6px 6px 6px 6px;
    padding: 22px 24px;
    width: 483px;
    .lists {
      font-weight: 400;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.6);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 64px;
      background: #f5f7f6;
      margin-bottom: 18px;
    }
  }

  .rightRacharts {
    background: #ffffff;
    border-radius: 6px 6px 6px 6px;
    padding: 22px 24px;
    flex: 1;
  }
}

.leftChaxun {
  background: #148958 !important;
  color: #fff !important;
}
.leftChaxun:hover {
  background: #148958 !important;
  color: #fff !important;
}

.leftChaxun2 {
  background: red !important;
  color: #fff !important;
}
.leftChaxun2.ant-collapse {
  background: red !important;
  color: #fff !important;
}
</style>
